﻿@mixin border($color) {border:1px solid $color;}
@mixin pad($size) {padding:$size;}
@mixin bg($color) {background-color:$color;}
@mixin font($size) {font-size:$size;}
@mixin center {text-align:center;}
@mixin middle {vertical-align:middle;}
@mixin inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: top;
}
@mixin img($size) {
    max-height: $size;
    max-width: $size;
}
@mixin div($size){
    width: $size;
    height: $size;
}

.light-border {
    border: solid 1px #eee;
}

.promotion {
    width: 228px;
    height: 200px;
}

.footLink {
    padding-left: 0em;
}
.footLink li{
    list-style-type: none;
}

.gplus {
    background: url("../img/bg.png") no-repeat scroll 0 -329px transparent;
    font-size: 13px;
    padding: 7px 27px !important;
}
.pinterest {
    background: url("../img/bg.png") no-repeat scroll 0 -362px transparent;
    font-size: 13px;
    padding: 7px 27px !important;
}
.twitter {
    background: url("../img/bg.png") no-repeat scroll 0 -95px transparent;
    font-size: 13px;
    padding: 7px 27px !important;
}
.yelp {
    background: url("../img/bg.png") no-repeat scroll 0 -188px transparent;
    font-size: 13px;
    padding: 7px 27px !important;
}
.yelp {
    background: url("../img/bg.png") no-repeat scroll 0 -188px transparent;
    font-size: 13px;
    padding: 7px 27px !important;
}

.vmenu
{
    padding-left: 0px;
    border: 1px solid #eee;
    list-style-type: none;
} 

.vmenu li 
{
    font-size: medium;
    background-color: #eef;
    font-weight: bold;
}

.vmenu li a
{
    padding-left: 10px;
    line-height: 1.8em;
    display: block;
}

.vmenu li ul
{
    border-style: none;
    padding-left: 0px;
    list-style-type: none;
}
.vmenu li ul li
{
    font-size: small;
    background-color: White;
    border-bottom: 1px solid #f8f8f8;
    font-weight: normal;
}

.vmenu li ul li:hover
{
    background-color: #eee;
}

#cat-header
{
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 10px;
    font-size: small;
}

#cat-container
{
    border: 1px solid #eee;
    float: left;
}

#cat-list
{
    text-align: center;
}

.prodBlock
{
    padding: 20px;
    text-align: center;
	position:relative;
	@include inline-block;

	#photo img{
		max-height: 120px;
		max-width: 120px;
	}

	#promotion{
		position: absolute;
		top: 80px;
		right: 20px;
	}

	#button img{
		width: 90px;
		padding: 5px;
	}
}

.prodList
{
	#photo{
		width: 60px;
	}

	#info{
		#promotion{
			float: right;
			width: 30px;
		}
	}

	#price{
		#basic{
			text-decoration: line-through;
		}
		#promotion{
			color: red;
			font-weight: bold;
		}
	}

	#button{
		width: 100px;
		img{
			width: 90px;
		}
	}

	#qty{
		width: 60px;
		input{
			width: 20px;
		}
	}

	#check{
		width: 20px;
	}
}


.no-right-border
{
    border-right: none !important;
}

.no-bottom-border
{
    border-bottom: none !important;
}

#cat-list .prod-img
{
    height: 219px;
}

.border-eee {@include border(#eee);}
.pad-10 {@include pad(10px);}
.pad-5 {@include pad(5px);}
.bg-eef {@include bg(#eef);}
.bg-fff {@include bg(#fff);}
.font-l {@include font(1.2em);}
.font-s {@include font(0.8em);}
.inline-block {@include inline-block;}
.center {@include center;}
.middle * {@include middle;}
.img-60 {@include img(60px);}
.div-60 {@include div(60px);}
.red {color:red;}
.hide {display:none;}

#newArrival div{
	@include inline-block;
	@include pad(10px);
	@include center;
	@include border(#eee);
	width:120px;
	height:130px;
}

#newArrival img{
	@include img(60px);
}

#onSale, #hotItems, #clearance{
	@extend #newArrival;
}

#alsoLike{
	@extend #newArrival;
}
#alsoLike div{
	@include div(60px);
}

#shipping{
	@include bg(#ffe);
}
#shipping label{
	@include inline-block;
	@include middle;
	text-align:right;
	width:120px;
}
#shipping select,#shipping input{
	width:150px;
}

#couponCode{
	@include inline-block;
	@include pad(10px);
	float:right;
	width:230px;
	vertical-align:middle;
	color:#88f;
	font-weight:bold;
	border:10px solid #fef;
	background-color:#ffe;
}

#address{
	label{
		width:130px;
		@include inline-block;
	}
	input[type=text],
	textarea,
	select{
		width:250px;
		padding:0px;
	}
	textarea{
		width:250px;
		height:50px;
	}
}

#selectShipping{
	label{
		width:130px;
		@include inline-block;
	}
	input[type=text],
	textarea,
	select{
		width:250px;
		padding:0px;
	}
	textarea{
		height:50px;
		padding:0px;
	}
}

#profile{
	input[type=text],
	input[type=password],
	textarea,
	select{
		width:300px;
	}
	textarea{
		height:50px;
		padding:0px;
	}
}

#myInformation
{
	h3{
		text-align:center;
		background-color:#eee;
		border:1px solid #ddd;
		padding:5px;
	}
}

hr.midBoard
{
	background:#ddd;
	color:#ddd;
	clear:both;
	float:none;
	width:100%;
	height:1px;
	margin-top:5px;
	margin-bottom:5px;
	border:none;
}

.prdThumb60
{
	border:1px solid #eee;
	width:60px;
	height:60px;
	text-align:center;
	@include inline-block;
	img{
		max-width:60px;
		max-height:60px;
	}
}